<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px"
                    style="margin-bottom: -20px">
                    <el-form-item label="关联订单" prop="orderNumber">
                        <el-input placeholder="请输入内容" v-model="searchData.orderNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="关联批次" prop="batchNumber">
                        <el-input placeholder="请输入内容" v-model="searchData.batchNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="操作人" prop="person">
                        <el-input placeholder="请输入内容" v-model="searchData.person"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage:stationRecord:query']" type="primary"
                            icon="el-icon-search" size="mini" @click="search">{{ $t('search') }}</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <el-button v-hasPermi="['productManage:stationRecord:add']" type="primary" icon="el-icon-plus"
                        size="mini" @click="addNew">{{ $t('add') }}</el-button>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh"
                                v-hasPermi="['productManage:stationRecord:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download"
                                v-hasPermi="['productManage:personnelStatistics:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>
                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable :data="setTableData" :columns="setTableColumns" :curr-page="searchData.pageNum"
                            :total-page="pageTotal" :page-size="searchData.pageSize" @sizeChange="sizeChange"
                            @currentChange="currentChange">
                            <template #state="scope">
                                <div :class="jumpClass(scope.scope.row.state)">{{ jumpState(scope.scope.row.state) }}
                                </div>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage:stationRecord:edit']" size="small" type="primary"
                                    plain style="padding: 5px" icon="el-icon-edit"
                                    @click="showEdit(scope.scope.row)">编辑</el-button>
                                <el-button v-hasPermi="['productManage:stationRecord:detail']" size="small"
                                    type="primary" plain style="padding: 5px" icon="el-icon-view"
                                    @click="showDetail(scope.scope.row)">
                                    详情
                                </el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
                <el-dialog :title="addOrEditTitle" :visible.sync="addOrEditDialog" width="748px" append-to-body
                    @close="cancel">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <!-- <div style="opacity: 0;">1</div> -->

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="工位编号" prop="stationNumber">
                                    <el-input v-model="formData.stationNumber" :disabled="addOrEditTitle == '详情'"
                                        placeholder="请输入工位编号" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="位置" prop="location">
                                    <el-input v-model="formData.location" :disabled="addOrEditTitle == '详情'"
                                        placeholder="请输入位置" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="关联订单" class="special_form_item" prop="orderId">
                                    <!-- <el-input v-model="formData.orderId"  placeholder="请输入关联订单" style="width:265px;" /> -->
                                    <el-select v-model="formData.orderId" clearable
                                        :disabled="addOrEditTitle == '详情' || addOrEditTitle == '编辑'"
                                        style="width: 265px" @change="orderChange" placeholder="请选择">
                                        <el-option v-for="item in allOrderList" :key="item.id" :label="item.number"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="关联批次" class="special_form_item" prop="batchId">
                                    <!-- <el-input v-model="formData.batchId" :disabled="addOrEditTitle=='详情' || addOrEditTitle=='编辑'"  placeholder="请输入关联批次" style="width:265px;" /> -->
                                    <el-select v-model="formData.batchId" clearable
                                        :disabled="addOrEditTitle == '详情' || addOrEditTitle == '编辑'"
                                        style="width: 265px" @change="batchChange" placeholder="请选择">
                                        <el-option v-for="item in batchList" :key="item.id" :label="item.number"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="关联分段" class="special_form_item" prop="productionId">
                                    <!-- <el-input v-model="formData.productionId" :disabled="addOrEditTitle=='详情'"  placeholder="请输入关联分段" style="width:265px;" /> -->
                                    <el-select v-model="formData.productionId" clearable
                                        :disabled="addOrEditTitle == '详情' || addOrEditTitle == '编辑'"
                                        style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in segmentList" :key="item.id" :label="item.number"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="操作人" prop="operator">
                                    <el-input v-model="formData.operator" :disabled="addOrEditTitle == '详情'"
                                        placeholder="请输入操作人" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始时间" prop="beginDate">
                                    <el-date-picker v-model="formData.beginDate" type="datetime" placeholder="选择日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 265px" :disabled="addOrEditTitle == '详情'"
                                        @change="startTimeChange"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束时间" prop="endDate">
                                    <el-date-picker v-model="formData.endDate" type="datetime" placeholder="选择日期"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 265px" :disabled="addOrEditTitle == '详情'"
                                        @change="endTimeChange"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="用时" prop="timeConsuming">
                                    <el-input v-model="formData.timeConsuming" type="number" disabled
                                        placeholder="请输入用时" style="width: 265px" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态" prop="state">
                                    <el-radio-group v-model="formData.state" :disabled="addOrEditTitle == '详情'">
                                        <!-- <el-radio :label="1">使用中</el-radio> -->
                                        <el-radio :label="2">已结束</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button v-if="addOrEditTitle != '详情'" @click="cancel">取 消</el-button>
                        <el-button v-if="addOrEditTitle != '详情'" type="primary" @click="submitForm">提 交</el-button>
                        <el-button v-if="addOrEditTitle == '详情'" type="primary" @click="cancel">关 闭</el-button>
                    </div>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getStationList, addStation, updateStation, getAllOrder, getBatchByOrderId, getSegmentByBatchId } from '../api/product/index';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                pageSize: 10,
                pageNum: 1,
                orderNumber: '',
                batchNumber: '',
                person: '',
            },
            setTableData: [],
            pageTotal: 0,
            setTableColumns: [
                {
                    label: '工位名称',
                    prop: 'stationName',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '工位编号',
                    prop: 'stationNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '工位位置',
                    prop: 'location',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '关联订单',
                    prop: 'orderNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '关联批次',
                    prop: 'batchNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '关联分段',
                    prop: 'productionNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作人',
                    prop: 'operator',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '联系方式',
                    prop: 'phone',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '开始时间',
                    prop: 'beginDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                // {
                //   label: '有功电量(kW·h)',
                //   prop: 'activePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                // {
                //   label: '无功电量(Kvar)',
                //   prop: 'reactivePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                {
                    label: '结束时间',
                    prop: 'endDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '用时',
                    prop: 'timeConsuming',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '状态',
                    prop: 'state',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '160',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            buttonLoading: false,
            formData: {
                stationNumber: '',
                location: '',
                orderId: '',
                batchId: '',
                productionId: '',
                operator: '',
                beginDate: '',
                endDate: '',
                timeConsuming: '',
                state: 2,
            },
            addOrEditTitle: '新增',
            addOrEditDialog: false,
            allOrderList: [],
            batchList: [],
            segmentList: [],
        };
    },
    mounted() {
        this.getPageList();
        this.getAllOrder();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.searchData.pageNum = 1;
            this.getPageList();
        },
        resetFields() {
            this.searchData = {
                pageSize: 10,
                pageNum: 1,
                orderNumber: '',
                batchNumber: '',
                person: '',
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.pageNum = val;
            this.getPageList();
        },
        getPageList() {
            const objs = {
                pageSize: this.searchData.pageSize,
                currPage: this.searchData.pageNum,
                orderNumber: this.searchData.orderNumber,
                batchNumber: this.searchData.batchNumber,
                person: this.searchData.person,
            };
            // const objss = {
            //   equipmentEnergyParam: objs
            // }
            getStationList(objs)
                .then((res) => {
                    this.setTableData = res.data.list;
                    this.pageTotal = res.data.total || 0;
                    this.buttonLoading = false;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        handleExport() {
            this.buttonLoading = true;
            var datas = {
                orderNumber: this.searchData.orderNumber,
                batchNumber: this.searchData.batchNumber,
                person: this.searchData.person,
                pageSize: '',
                pageNum: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/stationRecordsByReport',
                {
                    ...obj,
                },
                '工位记录.xlsx'
            );
            this.buttonLoading = false;
            // exportBuild(obj).then(res=> {
            //   const fileName = '设备能源监控记录.xlsx'
            //   saveExcel(res.data, fileName)
            // })
        },
        addNew() {
            this.addOrEditTitle = '新增';
            this.addOrEditDialog = true;
        },
        showDetail(val) {
            this.formData = {
                stationNumber: val.stationNumber || '',
                location: val.location || '',
                orderId: val.orderId || '',
                batchId: val.batchId || '',
                productionId: val.productionId || '',
                operator: val.operator || '',
                beginDate: val.beginDate || '',
                endDate: val.endDate || '',
                timeConsuming: val.timeConsuming || '',
                state: val.state || 2,
            };
            this.startTimeChange(this.formData.beginDate);
            this.addOrEditTitle = '详情';
            this.addOrEditDialog = true;
        },
        showEdit(val) {
            // this.formData = {
            //   stationNumber: val.stationNumber || '',
            //   location: val.location || '',
            //   orderId: val.orderId || '',
            //   batchId: val.batchId || '',
            //   productionId: val.productionId || '',
            //   operator: val.operator || '',
            //   beginDate: val.beginDate || '',
            //   endDate: val.endDate || '',
            //   timeConsuming: val.timeConsuming || '',
            //   state: val.state || 2
            // }
            this.formData = JSON.parse(JSON.stringify(val));
            this.startTimeChange(this.formData.beginDate);
            this.addOrEditTitle = '编辑';
            this.addOrEditDialog = true;
        },
        cancel() {
            this.addOrEditDialog = false;
            this.formData = {
                stationNumber: '',
                location: '',
                orderId: '',
                batchId: '',
                productionId: '',
                operator: '',
                beginDate: '',
                endDate: '',
                timeConsuming: '',
                state: 2,
            };
        },
        submitForm() {
            if (this.addOrEditTitle == '新增') {
                addStation(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.cancel();
                        this.getPageList();
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg,
                        });
                    }
                });
            } else {
                updateStation(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.cancel();
                        this.getPageList();
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg,
                        });
                    }
                });
            }
        },
        jumpState(val) {
            switch (val) {
                case 1:
                    return '使用中';
                case 2:
                    return '已结束';
                case 3:
                    return '未开始';
                default:
                    return '-';
            }
        },
        jumpClass(val) {
            switch (val) {
                case 1:
                    return 'waits';
                case 2:
                    return 'processs';
                case 3:
                    return 'completes';
                default:
                    return '-';
            }
        },
        startTimeChange(val) {
            console.log(val, '3333');
            if (this.formData.endDate && this.formData.beginDate) {
                var starts = new Date(val);
                var end = new Date(this.formData.endDate);
                if (starts > end) {
                    this.$message({
                        type: 'warning',
                        message: '开始时间不能大于结束时间',
                    });
                } else {
                    var totalTime = end - starts;
                    this.formData.timeConsuming = (totalTime / 60 / 60 / 1000).toFixed(2);
                }
            }
        },
        endTimeChange(val) {
            console.log(val, '3333444');
            if (this.formData.endDate && this.formData.beginDate) {
                var starts = new Date(this.formData.beginDate);
                var end = new Date(val);
                if (starts > end) {
                    this.$message({
                        type: 'warning',
                        message: '开始时间不能大于结束时间',
                    });
                } else {
                    var totalTime = end - starts;
                    this.formData.timeConsuming = (totalTime / 60 / 60 / 1000).toFixed(2);
                }
            }
        },
        orderChange(val) {
            (this.formData.batchId = ''), (this.formData.productionId = ''), (this.segmentList = []);
            this.batchList = [];
            getBatchByOrderId(val).then((res) => {
                console.log(res, '批次');
                this.batchList = res.data || [];
            });
        },
        batchChange(val) {
            (this.formData.productionId = ''), (this.segmentList = []);
            getSegmentByBatchId(val).then((res) => {
                this.segmentList = res.data || [];
            });
        },
        getAllOrder() {
            getAllOrder().then((res) => {
                console.log(res, '订单列表');
                this.allOrderList = res.data.list || [];
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}

.main_content {
    padding: 16px 20px;
}

::v-deep.el-card {
    border-radius: 8px;
}

.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;

    .page_content_head {
        display: flex;
    }
}

::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;

        .tableHeaderCell:active {
            opacity: 0.6;
        }

        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:last-of-type {
            cursor: default;
        }

        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}

.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}

.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}

.processs {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(255, 119, 51, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #ff7733;
    font-size: 14px;
    margin: 0 auto;
}

.waits {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #3399ff;
    font-size: 14px;
    margin: 0 auto;
}

.completes {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(0, 178, 74, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #00b24a;
    font-size: 14px;
    margin: 0 auto;
}

::v-deep .el-form {
    .special_form_item {
        .el-form-item__content {
            height: 35px !important;
            line-height: 35px !important;
        }
    }
}
</style>
